<template>
	<view class="content">
		<!-- 页面内容，添加顶部内边距 -->
		<image src="../../static/doctorBg.png" class="background-wrapper"></image>
		<view class="tabbar-page" v-if="!isLoading">
			<departmentVue v-if="showPage== 'dept'"></departmentVue>
			<HomeVue v-if="showPage=='home'"></HomeVue>
			<PatientManageVue v-if="showPage=='client'"></PatientManageVue>
			<UserVue v-if="showPage=='mine'"></UserVue>
		</view>
		
		<u-tabbar :value="value" @change="changeTabbar" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<template v-for="(item,index) in list">
				<u-tabbar-item :text="item.text" :icon="item.iconPath"></u-tabbar-item>
			</template>
		</u-tabbar>
	</view>
</template>

<script>
	import departmentVue from '../department/departmentMain.vue';
	import HomeVue from '../home/Home.vue';
	import PatientManageVue from '../patient/PatientManage.vue';
	import UserVue from '../user/User.vue';
	import navigationBar from '@/components/navigationBar.vue';
	import { doctorSelect } from '../../api/doctor';
	import { mapActions } from 'vuex'
	
	export default {
		components: {
			departmentVue,
			HomeVue,
			PatientManageVue,
			UserVue,
			navigationBar
		},
		data() {
			return {
				value: 0,
				showPage: 'home',
				isLoading: true,
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pathName: 'home',
						badge: 0,
						dot: false
					},
					{
						iconPath: "photo",
						selectedIconPath: "bell-fill",
						text: '诊室',
						customIcon: false,
						pathName: 'dept',
						badge: 0,
						dot: false
					}, 
					{
						iconPath: "photo",
						selectedIconPath: "bell-fill",
						text: '患者',
						customIcon: false,
						pathName: 'client',
						badge: 0,
						dot: false
					},
					{
						iconPath: "heart",
						selectedIconPath: "bell-fill",
						text: '我的',
						customIcon: false,
						pathName: 'mine',
						badge: 0,
						dot: false
					}
				]
			}
		},
		computed: {
		},
		mounted() {
			this.init()
		},
		methods: {
			...mapActions(['setUserInfo']),
			changeTabbar(e) {
				this.value = e;
				this.showPage = this.list[e].pathName;
			},
			init() {
				doctorSelect({
					code: '1097'
				}).then(res => {
					console.log(res)
					if (res.length > 0) {
						this.setUserInfo(res[0]);
						this.isLoading = false
					}
				})
			},
		}
	}
</script>

<style scoped>
.background-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.tabbar-page {
	overflow: hidden;
	box-sizing: border-box;
}
</style>